<template>
  <div class="reward">
    <section  class="reward-adv">
      <img :src="adv_src" @click="_link(adver_link)"/>
    </section>
    <section class="reward-option">
      <div class="option-header">
        <div class="header-box" v-bind:class="{'selectItem':current_select === 0}" @click="selectItem(0)">已提交</div>
        <div class="header-box" v-bind:class="{'selectItem':current_select === 1}" @click="selectItem(1)">已通过</div>
        <div class="header-box" v-bind:class="{'selectItem':current_select === 2}" @click="selectItem(2)">未通过</div>
      </div>

      <div v-infinite-scroll="loadMore1"
           infinite-scroll-disabled="loadingCommit"
           infinite-scroll-distance="1" class="option-content" v-show="current_select === 0 && commit_data.length>0">
        <div class="option-item" v-for="data in commit_data">
          <div class="item-title">{{data.scholarship_type_name}}</div>
          <div class="item-time">{{data.scholarship_start_time.replace(/-/g,'/').split(":")[0]}}:{{data.scholarship_start_time.replace(/-/g,'/').split(":")[1]}}</div>
        </div>
        <div class="zhanwei" style="height:4rem;display: none"></div>
      </div>
      <div class="blank-content" v-if="current_select === 0 && commit_data.length === 0">
        <div class="blank">
          <div class="icon-container">
            <i class="icon iconfont icon-kongbai blank-icon"></i>
          </div>
          <div class="blank-text">
            暂无申请记录
          </div>
        </div>
      </div>
      <div v-infinite-scroll="loadMore2"
           infinite-scroll-disabled="loadingPass"
           infinite-scroll-distance="1" class="option-content" v-show="current_select === 1 && pass_data.length>0">
        <div class="option-item" v-for="data in pass_data">
          <div class="item-title">{{data.scholarship_type_name}}</div>
          <div class="item-time">{{data.scholarship_start_time.replace(/-/g,'/').split(":")[0]}}:{{data.scholarship_start_time.replace(/-/g,'/').split(":")[1]}}</div>
        </div>
      </div>
      <div class="blank-content" v-if="current_select === 1 && pass_data.length === 0">
        <div class="blank">
          <div class="icon-container">
            <i class="icon iconfont icon-kongbai blank-icon"></i>
          </div>
          <div class="blank-text">
            暂无申请记录
          </div>
        </div>
      </div>

      <div v-infinite-scroll="loadMore3"
           infinite-scroll-disabled="loadingFail"
           infinite-scroll-distance="1" class="option-content" v-show="current_select === 2 && reject_data.length>0">
        <div class="option-item" v-for="data in reject_data" @click="confirmReward(data)">
          <div class="item-wrap">
            <div class="reject-tips">重新申请<i class="icon iconfont icon-jinru"></i></div>
            <div class="item-title">{{data.scholarship_type_name}}</div>
            <div class="item-time">{{data.scholarship_start_time.replace(/-/g,'/').split(":")[0]}}:{{data.scholarship_start_time.replace(/-/g,'/').split(":")[1]}}</div>
          </div>
          <div class="item-reason">{{data.audit_desc}}</div>
        </div>
      </div>
      <div class="blank-content" v-if="current_select === 2 && reject_data.length === 0">
        <div class="blank">
          <div class="icon-container">
            <i class="icon iconfont icon-kongbai blank-icon"></i>
          </div>
          <div class="blank-text">
            暂无申请记录
          </div>
        </div>
      </div>


      <Button class="bottome-button" :style="btStyle" :text="btntext" :dis="dis" @Click="goApply()"></Button>
    </section>

    <transition
      name="bounceshade">
      <div class="shade" v-show="shade" @click="hideall"></div>
    </transition>
    <transition
      name="bouncesreward">
      <reward-popup v-if="showRewardPopup" v-on:hide="hide" v-on:confirmReward="confirmReward" v-on:noReward="noReward"></reward-popup>
    </transition>
    <TextPopup :options="PopupConfig" v-if="Popup" @hide="hidepopup" @ok="ok()" @call="call()"
               @fall="fall()">
    </TextPopup>
  </div>
</template>

<script>
  import Button from '../../components/NewPlaying/components/Button/Index'
  import rewardPopup from '../../components/rewardPopup/index'
  import TextPopup from '../../components/TextPopup/index'
  import $ from 'jquery'
  export default {
    name: "index",
    data: function () {
      return{
        canClick:true,
        shade:false,
        loadingCommit:false,
        loadingPass:true,
        loadingFail:true,
        failIndex:1,
        commitIndex:1,
        passIndex:1,
        current_select:0, // 当前选中的类型  0 已提交 1 已通过 2未通过
        adv_src:require('../../assets/img/banner/bgwhite.jpg'),
        adver_link:'',
        showRewardPopup:false,
        PopupConfig: {
          btnStyle: {
            width: '70%',
            height: '4rem',
            background: '#ffd000',
            borderRadius: '4rem',
            color: '#66440a',
            fontSize: '1.8rem',
            boxShadow: '0 .5rem .6rem 0 rgba(255, 208, 0, 0.4)'
          },
          btnText: '知道了',
          btnClick: 'fall',
          title: '温馨提示',
          content: '抱歉，您未完成该奖学金的学习要求，如有问题请联系班长或客服！',
          Dis: false,
          icon: true,
          btnnum: 1,
        },
        Popup: false,
        btStyle:{
          width: 'calc((100% + 2rem)*0.7)',
          height: '4.5rem',
          borderRadius: '5rem',
          color: '#66440a',
          backgroundColor: '#ffd000',
          boxShadow: '0 .5rem .6rem 0 rgba(255, 208, 0, 0.4)',
          position:'fixed',
          bottom:'2.5rem',
          left:'calc(50% - (100% + 2rem)*0.7/2)'
        },
        dis:false,
        btntext:' 新建申请' ,
        commit_data:[],// 已提交数据
        pass_data:[],// 已通过数据
        reject_data:[]// 未通过数据
      }
    },
    mounted:function () {
      this.commit_data = [
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        // }
      ]
      this.pass_data = [
      ]
      this.reject_data = [
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传',
        //   need_img:1
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传'
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传'
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传'
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传'
        // },
        // {
        //   scholarship_type_name:'100天会员奖金',
        //   scholarship_start_time:'2018/03/28 18:39',
        //   audit_desc:'原因：上传截图错误，请重新上传'
        // }
      ]

      // 加载广告图
      let data = {
        adver_type:7
      }
      this.$axios.adver_list(data).then(res=>{
        if(res.data.qing_data.adver_info.length>0 && res.data.qing_data.adver_info[0].adver_cover){
          this.adv_src = res.data.qing_data.adver_info[0].adver_cover
          this.adver_link = res.data.qing_data.adver_info[0].adver_link
        }
        // 设置默认高度
        // $('.option-content').height($('.reward-option').height()-$('.option-header').height()-$('.bottome-button').innerHeight()-$('.zhanwei').height())
        $('.option-content').height($('.reward').height()/100*40)
      })
    },
    methods:{
      // 新建申请
      goApply : function () {
        this.shade = true
        this.showRewardPopup = true
      },
      //隐藏弹窗
      hide: function(){
        this.shade=false
        this.showRewardPopup = false
      },
      // 提交选择的奖学金
      confirmReward: function(reward){
        this.hide()
        //reward对象不为空时进行跳转
        if(reward.scholarship_type_name){
          if(this.canClick){
            this.canClick = false
            // 是否需要图片判断
            if(reward.need_img === 1){
              window.sessionStorage.setItem('reward',JSON.stringify(reward))
              this.$router.push({
                name:'UploadPic'
              })
            }else{
              //是否需要地址判断
              if(reward.reward_type === 2||reward.reward_type === 3){
                window.sessionStorage.setItem('reward',JSON.stringify(reward))
                this.$router.push({
                  name: 'RewardAddress'
                })

              }else{
                // 不需要地址直接上传
                let data = {
                  "address_id": -1,
                  "img_url": '-1',
                  "scholarship_id": reward.scholarship_id
                }
                this.$axios.upload_scholarship(data).then(res =>{
                  this.$router.push({
                    name:'RewardSuccess'
                  })
                })
              }
            }
          }
        }
      },
      // 类型选择
      selectItem: function (index) {
        if(this.current_select !== index){
          this.current_select = index
          if(index === 0){
            // 清空数据
            this.commitIndex = 1
            this.commit_data = []// 已提交数据
            this.loadingCommit = false
            this.loadingPass = true
            this.loadingFail = true
          }else if(index === 1){
            // 清空数据
            this.pass_data = []// 已通过数据
            this.passIndex = 1
            this.loadingCommit = true
            this.loadingPass = false
            this.loadingFail = true
          }else{
            // 清空数据
            this.failIndex = 1
            this.reject_data = []// 未通过数据
            this.loadingCommit = true
            this.loadingPass = true
            this.loadingFail = false
          }
        }
      },
      // 奖学金不可申请
      noReward: function () {
        this.hide()
        this.Popup = true
      },
      hidepopup: function () {
        this.Popup = false
      },
      ok: function () {
        this.Popup = false
      },
      call: function () {
        this.Popup = false
      },
      fall: function () {
        this.Popup = false
      },
      loadMore1:function () {
        let dataCommit = {
          params:{
            status:1,
            page_index:this.commitIndex++
          }
        }
        this.$axios.scholarship(dataCommit).then(res=>{
          if(res.data.qing_data.length !== 0){
            this.commit_data = this.commit_data.concat(res.data.qing_data)
            if(this.commit_data.length<6){
              this.loadMore1()
            }
          }else{
            this.loadingCommit = true
            if(this.commitIndex !== 1){
              this.commitIndex--
            }
          }
        })
      },
      loadMore2:function () {
        let dataPass = {
          params:{
            status:2,
            page_index:this.passIndex++
          }
        }
        this.$axios.scholarship(dataPass).then(res=>{
          if(res.data.qing_data.length !== 0){
            this.pass_data = this.pass_data.concat(res.data.qing_data)
            if(this.pass_data.length<6){
              this.loadMore2()
            }
          }else{
            this.loadingPass = true
            if(this.passIndex !== 1){
              this.passIndex--
            }

          }
        })
      },
      loadMore3:function () {
        let dataFail = {
          params:{
            status:3,
            page_index:this.failIndex++
          }
        }
        this.$axios.scholarship(dataFail).then(res=>{
          if(res.data.qing_data.length !== 0){
            this.reject_data = this.reject_data.concat(res.data.qing_data)
            if(this.reject_data.length<6){
              this.loadMore3()
            }
          }else{
            this.loadingFail = true
            if(this.failIndex !== 1){
              this.failIndex--
            }
          }
        })
      },
      hideall:function(){
        this.shade=false
        this.showRewardPopup = false
      },
      _link:function (link) {
        if (link === ' ' || link === '-1'||link === -1) {
          return
        }
        window.location.href = link
      }
    },
    components:{Button,rewardPopup,TextPopup}
  }
</script>

<style scoped>
  @import "../../assets/css/views/reward/index.css";
</style>
